<template>
  <el-card>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="系统配置" name="systemInfoConfig">
        <el-form ref="systemInfoConfig" :model="form" label-width="80px">
          <el-form-item label="系统名称" prop="name" :rules="[{ required: true, message: '请输入系统名称', trigger: 'blur' }]">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="Logo" prop="logoImg" :rules="[{ required: true, message: '请上传logo', trigger: 'blur' }]">
            <imageUpload v-model="form.logoImg" />
          </el-form-item>
          <el-form-item label="域名" prop="webBaseUrl" :rules="[{ required: true, message: '请输入项目前端所在域名', trigger: 'blur' }]">
            <el-input v-model="form.webBaseUrl" placeholder="https://pro.tduckcloud.com/" />
          </el-form-item>
          <el-form-item label="版权声明" prop="webBaseUrl" :rules="[{ required: true, message: '请输入版权声明', trigger: 'blur' }]">
            <Tinymce v-model="form.copyright" :height="192" placeholder="Copyright © 2018-2021 tduckcloud.com All Rights Reserved." />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="邮件配置" name="emailEnvConfig">
        <el-form ref="emailEnvConfig" :model="form" label-width="80px">
          <el-form-item label="Host" prop="host" :rules="[{ required: true, message: '请输入邮件host', trigger: 'blur' }]">
            <el-input v-model="form.host" placeholder="smtp.88.com" />
          </el-form-item>
          <el-form-item label="port" prop="port" :rules="[{ required: true, message: '请输入port', trigger: 'blur' }]">
            <el-input v-model="form.port" placeholder="465" />
          </el-form-item>
          <el-form-item label="用户名" prop="port" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
            <el-input v-model="form.username" placeholder="输入邮箱账号" />
          </el-form-item>
          <el-form-item label="授权码" prop="password" :rules="[{ required: true, message: '请输入授权码', trigger: 'blur' }]">
            <el-input v-model="form.password" placeholder="授权码非账号密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="短信配置" name="smsEnvConfig">
        <el-form ref="smsEnvConfig" :model="form" label-width="120px">
          <el-form-item label="短信渠道" prop="type" :rules="[{ required: true, message: '请选择短信渠道', trigger: 'blur' }]">
            <el-select v-model="form.type" placeholder="请选择短信渠道">
              <el-option label="阿里云" value="ALIYUN" />
              <el-option label="腾讯云" value="TENCENT_CLOUD" />
              <el-option label="中昱维信" value="VEESING" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.type=='VEESING'" label="appId" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
            <el-input v-model="form.appId" placeholder="请输入appId" />
          </el-form-item>
          <el-form-item v-if="form.type=='VEESING'" label="appKey" prop="secretKey" :rules="[{ required: true, message: '请输入appKey', trigger: 'blur' }]">
            <el-input v-model="form.secretKey" placeholder="请输入appKey" />
          </el-form-item>
          <el-form-item v-if="form.type=='ALIYUN'" label="AccessKeyID" prop="secretId" :rules="[{ required: true, message: '请输入AccessKeyID', trigger: 'blur' }]">
            <el-input v-model="form.secretId" placeholder="请输入AccessKeyID" />
          </el-form-item>
          <el-form-item v-if="form.type=='ALIYUN'" label="AccessKeySecret" prop="secretKey" :rules="[{ required: true, message: '请输入AccessKeySecret', trigger: 'blur' }]">
            <el-input v-model="form.secretKey" placeholder="请输入AccessKeySecret" />
          </el-form-item>
          <el-form-item v-if="form.type=='ALIYUN'" label="签名" prop="sign" :rules="[{ required: true, message: '请输入短信签名', trigger: 'blur' }]">
            <el-input v-model="form.sign" placeholder="请输入短信签名" />
          </el-form-item>
          <el-form-item v-if="form.type=='TENCENT_CLOUD'" label="SecretId" prop="secretId" :rules="[{ required: true, message: '请输入SecretId', trigger: 'blur' }]">
            <el-input v-model="form.secretId" placeholder="请输入SecretId" />
          </el-form-item>
          <el-form-item v-if="form.type=='TENCENT_CLOUD'" label="SecretKey" prop="secretKey" :rules="[{ required: true, message: '请输入SecretKey', trigger: 'blur' }]">
            <el-input v-model="form.secretKey" placeholder="请输入SecretKey" />
          </el-form-item>
          <el-form-item v-if="form.type=='TENCENT_CLOUD'" label="签名" prop="sign" :rules="[{ required: true, message: '请输入短信签名', trigger: 'blur' }]">
            <el-input v-model="form.sign" placeholder="请输入短信签名" />
          </el-form-item>
          <el-form-item v-if="form.type=='TENCENT_CLOUD'" label="appId" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
            <el-input v-model="form.appId" placeholder="请输入appId" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文件存储" name="fileEnvConfig">
        <el-alert
          class="mb10"
          title="本地存储建议使用nginx为上传目录配置访问域名"
          type="success"
        />
        <el-form ref="fileEnvConfig" :model="form" label-width="150px">
          <el-form-item label="存储平台" prop="ossType" :rules="[{ required: true, message: '请选择存储平台', trigger: 'blur' }]">
            <el-select v-model="form.ossType" placeholder="请选择存储平台">
              <el-option label="阿里云" value="ALIYUN" />
              <el-option label="七牛云" value="QINIU" />
              <el-option label="又拍云" value="UPYUN" />
              <el-option label="本地" value="LOCAL" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.ossType!='LOCAL'" label="AccessKeyID" prop="accessKeyId" :rules="[{ required: true, message: '请输入AccessKeyID', trigger: 'blur' }]">
            <el-input v-model="form.accessKeyId" placeholder="请输入AccessKeyID" />
          </el-form-item>
          <el-form-item v-if="form.ossType!='LOCAL'" label="AccessKeySecret" prop="accessKeySecret" :rules="[{ required: true, message: '请输入AccessKeySecret', trigger: 'blur' }]">
            <el-input v-model="form.accessKeySecret" placeholder="请输入accessKeySecret" />
          </el-form-item>
          <el-form-item v-if="form.ossType=='ALIYUN'" label="Endpoint" prop="endpoint" :rules="[{ required: true, message: '请输入Endpoint', trigger: 'blur' }]">
            <el-input v-model="form.endpoint" placeholder="请输入Endpoint" />
          </el-form-item>
          <el-form-item v-if="form.ossType!='LOCAL'" label="bucketName" prop="bucketName" :rules="[{ required: true, message: '请输入bucketName', trigger: 'blur' }]">
            <el-input v-model="form.bucketName" placeholder="请输入bucketName" />
          </el-form-item>
          <el-form-item v-if="form.ossType=='LOCAL'" label="存储路径" prop="uploadFolder" :rules="[{ required: true, message: '请输入存储路径', trigger: 'blur' }]">
            <el-input v-model="form.uploadFolder" placeholder="请输入存储路径" />
          </el-form-item>
          <el-form-item label="访问域名" prop="domain" :rules="[{ required: true, message: '请输入能访问文件的域名', trigger: 'blur' }]">
            <el-input v-model="form.domain" placeholder="请输入能访问文件的域名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="微信公众号" name="wxMpEnvConfig">
        <el-form ref="wxMpEnvConfig" :model="form" label-width="120px">
          <el-form-item label="appId" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
            <el-input v-model="form.appId" placeholder="请输入appId" />
          </el-form-item>
          <el-form-item label="appSecret" prop="secret" :rules="[{ required: true, message: '请输入appSecret', trigger: 'blur' }]">
            <el-input v-model="form.secret" placeholder="请输入appSecret" />
          </el-form-item>
          <el-form-item label="token" prop="token" :rules="[{ required: true, message: '请输入token', trigger: 'blur' }]">
            <el-input v-model="form.token" placeholder="请输入token" />
          </el-form-item>
          <el-form-item label="aesKey" prop="aesKey" :rules="[{ required: true, message: '请输入AESKey', trigger: 'blur' }]">
            <el-input v-model="form.aesKey" placeholder="请输入AESKey" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="微信支付" name="wxPayEnvConfig">
        <el-form ref="wxPayEnvConfig" :model="form" label-width="120px">
          <el-form-item label="appId" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
            <el-input v-model="form.appId" placeholder="微信公众号的appid" />
          </el-form-item>
          <el-form-item label="商户Id" prop="mchId" :rules="[{ required: true, message: '请输入微信支付商户号', trigger: 'blur' }]">
            <el-input v-model="form.mchId" placeholder="请输入微信支付商户号" />
          </el-form-item>
          <el-form-item label="商户秘钥" prop="mchKey" :rules="[{ required: true, message: '请输入微信支付商户密钥', trigger: 'blur' }]">
            <el-input v-model="form.mchKey" placeholder="请输入微信支付商户密钥" />
          </el-form-item>
          <el-form-item label="支付回调地址" prop="notifyUrl" :rules="[{ required: true, message: '请输入微信支付回调地址', trigger: 'blur' }]">
            <el-input v-model="form.notifyUrl" placeholder="请输入支付回调地址" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="Ocr识别" name="ocrEnvConfig">
        <el-form ref="ocrEnvConfig" :model="form" label-width="120px">
          <el-form-item label="appId" prop="appId" :rules="[{ required: true, message: '请输入appId', trigger: 'blur' }]">
            <el-input v-model="form.appId" placeholder="请输入appId" />
          </el-form-item>
          <el-form-item label="apiKey" prop="apiKey" :rules="[{ required: true, message: '请输入apiKey', trigger: 'blur' }]">
            <el-input v-model="form.apiKey" placeholder="请输入apiKey" />
          </el-form-item>
          <el-form-item label="secretKey" prop="secretKey" :rules="[{ required: true, message: '请输入secretKey', trigger: 'blur' }]">
            <el-input v-model="form.secretKey" placeholder="请输入secretKey" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import {getEnvConfig, saveEnvConfig} from '@/api/system/config'

export default {
  name: "ConfigForm",
  data() {
    return {
      activeName: 'systemInfoConfig',
      form: {},
      config: {}
    }
  },
  created() {
    this.handleClick()
  },
  methods: {
    handleClick() {
      getEnvConfig(this.activeName).then((res) => {
        if (res.data) {
          this.config = res.data
          this.form = res.data.envValue
        } else {
          this.config = {}
          this.form = {}
        }
      })
    },
    handleSubmit() {
      this.$refs[this.activeName].validate((valid) => {
          if (valid) {
            this.config.envKey = this.activeName
            this.config.envValue = this.form
            saveEnvConfig(this.config).then((res) => {
              this.msgSuccess('保存成功')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        }
      )
    }
  }
}
</script>

<style scoped>

</style>
